<template>
  <div class="container-annual" style="position: relative">
    <div class="top">
      <p class="title">年度游客量对比</p>
      <span class="deco"></span>
    </div>
    <div
      class="annualChart"
      ref="annualChart"
      style="width: 100%; height: 300px"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const annualChart = ref();
onMounted(() => {
  let mycharts = echarts.init(annualChart.value);
  const option = {
    color: ["#80FFA5", "#FF0087", "#FFBF00"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["2021年", "2022年", "2023年"],
      top: "10%",
      left: "30%",
      textStyle: {
        color: "white",
      },
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        name: "(人数)",
        nameGap: "20",
        nameTextStyle: {
          align: "right",
        },
      },
    ],
    series: [
      {
        name: "2021年",
        type: "line",

        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.6,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [140, 232, 501, 264, 690, 340, 250, 190, 130, 220, 282, 111],
      },
      {
        name: "2022年",
        type: "line",

        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [120, 282, 111, 234, 390, 340, 310, 201, 334, 190, 130, 220],
      },
      {
        name: "2023年",
        type: "line",

        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.6,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [320, 132, 201, 334, 190, 130, 220, 282, 111, 234, 220, 340],
      },
    ],
  };
  mycharts.setOption(option);
});
</script>

<style lang="scss" scoped>
.container-annual {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-rc.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 60px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
  }
}
</style>
